import React, { useState,useImperativeHandle} from 'react';
import { Modal, Button,Input } from 'antd';
import '../deviceManege/ModalB.less'

function ModalB({childRef}) {
  useImperativeHandle(childRef, () => ({
            showModal,
    }));
    const [isModalVisible, setIsModalVisible] = useState(false);
    
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      setIsModalVisible(false);
    };
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };
  
    return (
      <div className="modalb">
        { <a  onClick={showModal}>
          编辑
        </a> }
        <Modal centered={true} className="aaa" title="编辑" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}  destroyOnClose={true}
            footer={[
                <Button id="btn1">确认</Button>,
                <Button id="btn2" onClick={handleCancel}>取消</Button>
            ]}        
        >
             <div className="d1">
                 <span>设备名称：</span>
                 <Input placeholder="请输入设备名称"></Input>
             </div>
             <div className="d2">
                 <span>设备编号</span>
                 <Input placeholder="请输入设备编号"></Input>
             </div>
             <div className="d3">
                 <span>MAC地址：</span>
                 <Input placeholder="请输入MAC地址"></Input>
             </div>
        </Modal>
    </div>
  );
};

export default ModalB